<template>
    <div class="content-wrapper">
        <el-row class="content-row">
            <el-col class="height-init cityTree" :span="3">
                <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-col>
            <el-col class="height-init" :span="21">
                <div class="container">
                    <el-row class="handle-box">
                        <el-input v-model="query.subject" class="handle-input mr10" placeholder="话题主题"/> 
                        <el-select v-model="query.status" class="mr10" filterable clearable placeholder='话题状态' >
                            <el-option
                                v-for="(k,v) in status"
                                :key="v"
                                :label="k"
                                :value="v">
                            </el-option>
                        </el-select>
                        <el-date-picker 
                            :editable="false"
                            placeholder="生效时间"
                            class="mr10"
                            v-model="query.querytime"
                            type="date">
                        </el-date-picker>

                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        <el-button type="primary" icon="el-icon-setting" @click="resetQueryForm">重置</el-button>

                        <el-button type="primary" icon="el-icon-plus" class="handle-del" @click="addSubject">新增</el-button>
                    </el-row>
                    <el-row class="list-table-row">
                        <el-table
                            :data="tableData"
                            border
                            class="table"
                            ref="multipleTable"
                            height="100%"
                            header-cell-class-name="table-header"
                            @selection-change="handleSelectionChange"
                        >
                            <el-table-column type="selection" width="55" align="center"></el-table-column>
                            <el-table-column type="index" width="50" align="center"></el-table-column>
                            <el-table-column prop="subject" label="主题" show-overflow-tooltip >
                                <template slot-scope="scope">
                                   <span type="text" style="color:#409EFF; cursor:pointer" @click="openSubjectPost(scope.row)" >{{scope.row.subject}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="position" width="150"  label="投放板块">
                                <template slot-scope="scope">
                                    {{positions[scope.row.position]}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="posts" width="100" label="帖子数" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    {{scope.row.posts === null ? 0 : scope.row.posts}}次
                                </template>
                            </el-table-column>
                            <el-table-column prop="money" width="250" label="上架时间" show-overflow-tooltip>
                                <template slot-scope="scope" >
                                    <span>{{renderTimeNoTime(scope.row.beginTime)}}至{{renderTimeNoTime(scope.row.endTime)}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="当前状态" width="150"  align="center">
                                <template slot-scope="scope" >
                                    <span v-if="scope.row.status === 3 && checkTime(scope.row)">等待上架</span>
                                    <span v-else>{{status[scope.row.status]}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" width="200"  label="创建时间" show-overflow-tooltip>
                                <template slot-scope="scope" >
                                    {{renderTime(scope.row.createTime)}}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="240" align="center" fixed="right" >
                                <template slot-scope="scope">
                                    <!-- <el-button type="text"  size="small" @click="openSubjectPost(scope.row)" >详情</el-button> -->
                                    <el-button type="text" icon="el-icon-edit" @click="openEditDialog(scope.row)" >编辑</el-button>
                                    <el-button type="text" v-if="scope.row.status === 1"  icon="el-icon-delete" @click="removeSubject(scope.row)" >删除</el-button>
                                    <el-button type="text" v-if="scope.row.status === 1 || scope.row.status === 2 || scope.row.status === 5"  icon="el-icon-s-promotion" @click="putWaySubject(scope.row)" >发布</el-button>
                                    <el-button type="text" v-if="scope.row.status === 3"  icon="el-icon-bottom" @click="putDownSubject(scope.row)" >下架</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <el-row class="pagination-self">
                        <el-pagination
                            background
                            layout="total, sizes, prev, pager, next"
                            :current-page="query.pageNo"
                            :page-size="query.pageSize"
                            :total="pageTotal"
                            @size-change="handleSizeChange"
                            @current-change="handlePageChange"
                        ></el-pagination>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <el-dialog 
            title='新增话题'
            width='40%'
            :visible.sync="addDialogVisible"
            :before-close="handleClose"
            :close-on-click-modal="false"
            append-to-body>
            <subject-add  v-if="addDialogVisible" @handleClose='handleClose' @saveClose="saveClose" />
        </el-dialog >

        <el-dialog 
            title='修改话题'
            width='40%'
            :visible.sync="editDialogVisible"
            :before-close="handleEditClose"
            :close-on-click-modal="false"
            append-to-body>
            <subject-edit v-if="editDialogVisible" :subject="curRow"  @handleClose='handleEditClose' @saveClose="saveEditClose" />
        </el-dialog >

    </div>

</template>

<script>
import { getCityTree } from '../../../../api/city'
import {fetchPageList,deleteSubject,updateSubject} from '../../../../api/bbs/subject'
import SubjectAdd from './SubjectAdd'
import SubjectEdit from './SubjectEdit'

export default {
    name: 'subjectList',
    data() {
        return {
            curRow:{},
            positions: {},
            status: {},
            addDialogVisible:false,
            editDialogVisible:false,
            query: {
                pageNo: 1,
                pageSize: 20,
                effectiveTime: '',
                subject: '',
                status: '',
                querytime: '',
                cityCode:''
            },
            tableData: [],
            multipleSelection: [],
            pageTotal: 0,
            spaces:[],
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'name',
                isLeaf: 'leaf'
            }
        };
    },

    activated(){
        this.pageInit();
    },
    created() {
        this.pageInit();
    },
    methods: {
        putDownSubject(row){
            updateSubject({id:row.id, status:5,actionType:'updateStatus'}).then(res=>{
                if (res.code == "0") {
                    this.$message({ message: "下架成功", type: "success" });
                    this.fetchTableData();
                } else {
                    this.$message({ message: res.data.msg, type: "error" });
                }
            })
        },
        putWaySubject(row){
            updateSubject({id:row.id, status:3,actionType:'updateStatus'}).then(res=>{
                if (res.code == "0") {
                    this.$message({ message: "发布成功", type: "success" });
                    this.fetchTableData();
                } else {
                    this.$message({ message: res.data.msg, type: "error" });
                }
            })
        },
        checkTime(row){
            let beginTime = row.beginTime;
            let curTime = new Date().getTime();
            console.log("checkTime==>",beginTime,curTime,curTime < beginTime);
            return curTime < beginTime;
        },
        resetQueryForm(){
            this.query = {
                pageNo: 1,
                pageSize: 20,
                effectiveTime: '',
                subject: '',
                status: '',
                querytime: '',
                cityCode:''
            }
            this.fetchTableData();
        },
        openEditDialog(row){
            this.curRow = row;
            this.editDialogVisible = !this.editDialogVisible;
        },
        removeSubject(row){
            let that = this;
            that.$confirm('确认删除？')
            .then(_ => {
                deleteSubject({id:row.id}).then(res=>{
                    console.log("deleteSubject ===>",res);
                    that.fetchTableData();
                })
            })
            .catch(_ => {});
        },
        openSubjectPost(row){
            this.addTag('话题帖子列表','/bbs/subject/post/list/'+row.id,'subjectPostList'+row.id)
        },
        pageInit(){
            this.enumMap('SubjectEnum.PositionEnum','com.zlll.winner.enums.bbs').then(res=>{if(res) this.positions = res });
            this.enumMap('SubjectEnum.StatusEnum','com.zlll.winner.enums.bbs').then(res=>{if(res) this.status = res});
            this.fetchTreeData();
            this.fetchTableData();
        },
        saveClose(){
            this.addDialogVisible = !this.addDialogVisible;
            this.fetchTableData();
        },
        saveEditClose(){
            this.editDialogVisible = !this.editDialogVisible;
            this.fetchTableData();
        },
        handleClose(done) {
            let that = this
            this.$confirm('确认关闭？')
            .then(_ => {
                that.addDialogVisible = !that.addDialogVisible;
                that.fetchTableData();
            })
            .catch(_ => {});
        },
        handleEditClose(done) {
            let that = this
            this.$confirm('确认关闭？')
            .then(_ => {
                that.editDialogVisible = !that.editDialogVisible;
                that.fetchTableData();
            })
            .catch(_ => {});
        },
        addSubject(){
            this.addDialogVisible = !this.addDialogVisible
        },
        handleNodeClick(node){
            console.log("handleNodeClick==>node:",node)
            this.query.cityCode = node.code;
            this.fetchTableData();
        },
        fetchTreeData(){
            let that = this;
            getCityTree().then(res=>{
                that.treeData = res.data
            })
        },
        //搜索条件方法
        handleSearch(){
            this.query.pageNo = 1;
            this.fetchTableData();
        },
        // 表格数据查询方法
        fetchTableData(){
            let that = this;
            if(that.query.querytime){
                that.query.effectiveTime = that.query.querytime.getTime();
            }else{
                that.query.effectiveTime = '';
            }
            fetchPageList(that.query).then(res=>{
                if(res.code == '0'){
                    that.tableData = res.data.records;
                    that.pageTotal = res.data.total;
                }
            });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 分页方法
        handlePageChange(val) {
            this.query.pageNo = val;
            this.fetchTableData();
        },
        // 分页大小改变方法
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.fetchTableData();
        },
    },
    components:{SubjectAdd,SubjectEdit}
};
</script>

<style scoped>

.content-wrapper{
    height:100%;
    overflow-y: hidden;
}

.content-row{
    height: 100%;
}

.cityTree{
    overflow-y: scroll;
}

.height-init{
    height: 100%;
}

.container{
    height: 100%;
}

.handle-box {
    height: 6.5%;
}

.handle-input {
    width: 120px;
    display: inline-block;
}

.list-table-row{
    height:83%;
}

.table {
    width: 100%;
    height: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.pagination-self{
    height:10%;
    text-align: right;
    margin-top: 5px;
}
</style>
